<template>
  <view class="page-container">
	<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="课程详情" @clickLeft="back" />
    <view class="bottom">
      <view class="item" :class="['item',{'color-primary':signStatus}]" @click="signUp">
        <view class="iconfont icon-wyzp"></view>
		<text>{{signStatus?'已':''}}报名</text>
      </view>
      <view :class="['item',{'color-primary':collection}]" @click="collect">
        <view :class="['iconfont',collection?'icon-shoucang1':'icon-shoucang']"></view>
        <text>{{collection?'已':''}}收藏</text>
      </view>
      <button class="connect" @click="connect" open-type="contact">
        立即咨询
      </button>
    </view >
    
	<view class="detail">
		<view class="text-desc">
			<text class="titleName">课程名称</text>
			<text class="desc">{{detail.courseTitle}}</text>
		</view>
		<view class="text-desc">
			<text class="titleName">课程分类</text>
			<text class="desc">{{detail.classification}}</text>
		</view>
		<view class="text-desc">
			<text class="titleName">培训时间</text>
			<text class="desc">{{detail.time}}</text>
		</view>
		<view class="text-desc">
			<text class="titleName">培训费用</text>
			<text class="desc">{{detail.cost}}</text>
		</view>
		<view class="text-desc">
			<text class="titleName">课程简介</text>
			<view class="desc" v-html='detail.briefIntroduction'></view>
		</view>
	</view>
    <!-- <view class="detail">
      <view class="detail-title">
        课程详情
      </view>
    </view> -->
  </view>
</template>

<script>
import workItem from '../../components/workItem.vue';
  export default {
    data() {
      return {
        // 接收从position传过来的
        item: {
			tags: 'python,java,js,node'
		},
        // 接收请求过来得数据
        detail: {},
		companyData: {},
        collection: false,
        signStatus: false,
        jobList:[],
        offset:0,
		map: {
			latitude:23.106574, //纬度
			longitude:113.324587,//经
		},
		markers: [],
		otherErs: [],
		id: ''
      }
    },
    onLoad(options) {
		const {id} = options;
		this.id = id;
		this.getDetailData(id);
    },
	components:{
		workItem
	},
    methods: {
		getDetailData(id) {
			const _this = this;
			const regex = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
			this.$api.trainingDetail(id).then(async res=>{
				if(res.code === 200) {
					this.detail = res.data;
					this.signStatus = this.detail.signStatus;
					this.collection = this.detail.collectStatus;
					let replacedString = await this.replaceAsync(this.detail.briefIntroduction, regex, this.getNewImgPath);
					replacedString = replacedString.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
					this.detail.briefIntroduction = replacedString;
				}
			})
		},
		back() {
			uni.navigateBack()
		},
		// 点击立即沟通
		connect() {
			console.log('xxx');
		},
		signUp() {
			if(this.signStatus) {
				uni.showToast({
				    title: '已经报名过了~',
				    icon: 'none',
				    duration: 2000
				})
			} else {
				this.$api.postSingUp(this.detail.id).then(res=>{
					if(res.code === 200) {
						uni.showToast({
						    title: '报名成功',
						    icon: 'none',
						    duration: 2000
						});
						this.getDetailData(this.id);
					} else {
						uni.showToast({
						    title: res.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
				})
			}
		},
		companyClick() {
			uni.navigateTo({
			  url:"/pages/companyDetail/companyDetail?id=" + this.detail.companyId
			})
		},
		// 学历转换
		changeStatus(type) {
			switch(type) {
				case 0: 
					return '大专及以下';
				case 1:
					return '普本';
				case 2:
					return '双一流';
				case 3:
					return '硕士研究生';
				case 4:
					return '博士研究生';
				default:
					return '';
			}
		},
		collect() {
			let id = this.detail.id;
			if(this.collection) {
				uni.showModal({
					title: '提示',
					content: '确定取消收藏？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#39B54A',
					cancelColor: '#39B54A',
					success: (res) => {
						if(res.confirm) {  
							this.$api.train_del_collectJob(id).then(res1=>{
								if(res1.code === 200) {
									uni.showToast({
										title: '取消收藏成功',
										icon: 'none',
										duration: 2000
									});
									this.getDetailData(this.id);
								} else {
									uni.showToast({
										title: res1.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else {  
							console.log('cancel') //点击取消之后执行的代码
						}
					} 
				})
			} else {
				this.$api.trainCollectJob(id).then(res=>{
					if(res.code === 200) {
						uni.showToast({
						    title: '收藏成功',
						    icon: 'none',
						    duration: 2000
						});
						this.getDetailData(this.id);
					} else {
						uni.showToast({
						    title: res.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
				})
			}
		},
		// 获取图片地址
		getNewImgPath(url) {
		  let newUrl = url.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
			let imgPath = capture.split('?')[0];
			return imgPath;
		  })
		  return new Promise(async (resolve, reject) =>{
			try {
			  const res = await await this.$api.getImgPath(newUrl);
			  if(res.code == 200) {
				resolve(res.data);
			  } 
			} catch (error) {
			  console.log('error', error);
			  reject(error);
			}
		  })
		},
		// 替换函数
		async replaceAsync(str, regex, asyncFn) {
		  const promises = [];
		  str.replace(regex, (match, ...args) => {
			  const promise = asyncFn(match, ...args);
			  promises.push(promise);
		  });
		  const data = await Promise.all(promises);
		  return str.replace(regex, () => '<img src="'+ data.shift() + '"/>');
		},
    }
  }
</script>

<style lang="scss">
  page {
    width: 680rpx;
    // 84
    // padding: 0 35rpx 180rpx;
    padding-bottom: 180rpx;
  }

  .title {
    width: 680rpx;
    padding: 200rpx 0 0;
    display: flex;
    justify-content: space-between;
    align-content: center;
    font-weight: bold;

    view {
      font-size: 40rpx;
	  line-height: 50rpx;
      // max-width: 380rpx;
    }

    text {
      font-size: 30rpx;
      color: $uni-primary;
      display: flex;
      align-items: center;
    }
  }

  .condition {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    padding: 0 0;

    .iconfont {
	  display: flex;
      margin-right: 40rpx;
      color: $uni-text-color;

      text {
        margin-left: 10rpx;
        font-size: 28rpx;
      }
    }
  }

  .detail {
    width: 680rpx;
    padding: 0 0;
    margin-top: 20rpx;

    .detail-title {
      font-size: 38rpx;
      font-weight: bold;
	  margin-bottom: 20rpx;
    }

    .text-desc {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		
		
		line-height: 80rpx;
		position: relative;
		padding: 40rpx 0;
		&::after{
			position: absolute;
			box-sizing: border-box;
			content: ' ';
			pointer-events: none;
			right: 0;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid #ebedf0;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
		}
		color: #000;
		.titleName{
			font-size: 38rpx;
			flex: 1;
			// width: 150rpx;
			font-weight: 500;
		}
		.desc{
			font-size: 30rpx;
			line-height: 40rpx;
			text-align: left;
			flex: 1;
			
		}
    }
  }

  .map {
    width: 680rpx;
    height: 456rpx;
    // margin-left: 35rpx;
    background: grey;
    border-radius: 20rpx;
  }

  .border-bottom-none {
    border-bottom: none;
  }

  .bottom {
    width: 680rpx;
    height: 142rpx;
    padding: 0 35rpx;
    border-top: 1rpx solid #F1F1F1;
    background: #fff;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
	z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .connect {
      width: 492rpx;
      height: 84rpx;
      background: $uni-primary;
      border-radius: 20rpx;
      color: $uni-text-color-inverse;
      line-height: 84rpx;
      text-align: center;
	  overflow: hidden;
    }
    .color-primary {
      color: $uni-primary;
    }

    .item {
      text-align: center;

      .iconfont {
        height: 32rpx;
        line-height: 32rpx;
      }

      .icon-share {
        font-size: 32rpx;
      }

      .icon-shoucang,.icon-shoucang1 {
        font-size: 44rpx;
      }

      text {
        font-size: 24rpx;
      }
    }
  }
</style>
